<template>
    <div>
        <div class="tab">
            <div>会员卡标题</div>
            <div class="tabSearch">
                <el-input style="margin: 0 10px ;" v-model="input" placeholder="请输入会员卡标题"></el-input>
                <el-button type="primary" icon="el-icon-search">搜索</el-button>
            </div>
        </div>
        <div class="addBtn">
            <el-button type="primary" @click="handleButtonAdd()">+ 添加</el-button>
            <el-dialog title="添加" :visible.sync="dialogTableVisible">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="会员卡名称" prop="name">
                        <el-input v-model="ruleForm.title"></el-input>
                    </el-form-item>
                    <el-form-item label="会员卡封面">
                        <el-upload action="https://api.zctj16888.com/admin/v1/image/ossUpload" list-type="picture-card" ref="uploadImg"
                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove" name="image" :on-success="handleAvatarSuccess">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>

                    <el-form-item label="会员卡有效期">
                        <el-radio-group v-model="ruleForm.lx_day">
                            <el-radio :label="1">周卡</el-radio>
                            <el-radio :label="2">月卡</el-radio>
                            <el-radio :label="3">季卡</el-radio>
                            <el-radio :label="4">年卡</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="优惠前金额">
                        <el-input v-model="ruleForm.origin_coin"></el-input>
                    </el-form-item>
                    <el-form-item label="优惠后金额">
                        <el-input v-model="ruleForm.coin"></el-input>
                    </el-form-item>
                    <el-form-item label="内容">
                        <quill-editor v-model="ruleForm.content">
                        </quill-editor>
                        <!-- <el-input v-model="ruleForm.content"></el-input> -->
                    </el-form-item>
                    <el-form-item label="会员卡描述">
                        <el-input v-model="ruleForm.desc"></el-input>
                    </el-form-item>
                    <!-- <quill-editor v-model="content">

                    </quill-editor> -->
                    <!-- <el-form-item style="margin-top: 10px;" label="会员卡排序" prop="name">
                        <el-input v-model="sortCard"></el-input>
                    </el-form-item>
                    <el-form-item label="是否上架" prop="name">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="上架平台" prop="name">
                        <el-select v-model="values" placeholder="请选择">
                            <el-option v-for="item in platformList" :key="item.values" :label="item.label"
                                :value="item.values">
                            </el-option>
                        </el-select>
                    </el-form-item> -->

                </el-form>
                <div style="text-align: right;">
                    <el-button @click="clickDelete">取消</el-button>
                    <el-button type="primary" @click="clickConfirm">确认</el-button>
                </div>
            </el-dialog>
        </div>

        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="ID" align="center">
            </el-table-column>
            <el-table-column prop="imgSrc" label="会员卡封面" align="center">
                <template slot-scope="scope">
                    <el-image style="width: 100px; height: 100px" :src="scope.row.img_url" fit="fill"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="卡片标题" align="center">
            </el-table-column>
            <el-table-column prop="lx_day" label="类型" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.lx_day == 1">
                        <div class="status-icon"></div>周卡
                    </span>
                    <span v-if="scope.row.lx_day == 2">
                        <div class="status-icon"></div>月卡
                    </span>
                    <span v-if="scope.row.lx_day == 3">
                        <div class="status-icon"></div>季度卡
                    </span>
                    <span v-if="scope.row.lx_day == 4">
                        <div class="status-icon"></div>年卡
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="更新时间" align="center">
            </el-table-column>
            <el-table-column prop="origin_coin" label="优惠前" align="center">
            </el-table-column>
            <el-table-column prop="coin" label="优惠后" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
                        <el-button size="small" type="danger" style="width: 126px;margin-bottom: 10px"
                            @click="handleButton1Click(scope.row,2)">会员管理</el-button>
                        <el-button size="small" type="info" style="width: 126px;margin: 0 !important;"
                            @click="handleButton1Click(scope.row,1)">过期会员</el-button>
                    </div>
                    <div style="margin-top: 10px;">
                        <el-button type="primary" icon="el-icon-edit" circle @click="modifyVip(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="deleteVip(scope.row)"></el-button>
                        <el-button type="text" @click="giftsVip(scope.row)">赠送</el-button>
                        <!-- <el-button @click="giftsVip(scope.row)">赠送</el-button> -->
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="会员管理" :visible.sync="dialogManagementVisible">
            <el-table :data="managementData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
                <el-table-column prop="vip_text" label="类型" align="center">
                </el-table-column>
                <el-table-column prop="nickname" label="用户" align="center">
                </el-table-column>
                <el-table-column prop="mobile" label="手机号" align="center">
                </el-table-column>
                <el-table-column prop="remark" label="备注" align="center">
                </el-table-column>
                <el-table-column prop="vip_end_time" label="到期时间" align="center">
                </el-table-column>
                <!-- <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="danger" icon="el-icon-delete"
                            @click="handleButtonDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
        </el-dialog>
    </div>
</template>

<script>
import { VueQuillEditor } from 'vue-quill-editor';
import { vipCardList, vipCardDelete, vipCardModify,vipUserList,sendVipUserList } from '../../../libs/api'
export default {
    data() {
        return {
            dialogManagementVisible: false,
            rules: {
                // name: [
                //     { required: true, message: '请输入名称', trigger: 'blur' },
                // ],
            },
            ruleForm: {},
            options: [{
                value: '选项1',
                label: '上架'
            }, {
                value: '选项2',
                label: '不上架'
            }],
            platformList: [{
                values: '选项1',
                label: 'H5'
            }, {
                values: '选项2',
                label: 'APP'
            }, {
                values: '选项3',
                label: '小程序'
            }],
            values: '',
            value: '',
            input: '',
            sortCard: '',
            content: '',
            dialogImageUrl: '',
            dialogTableVisible: false,
            dialogVisible: false,
            managementData: [],
            // 总数据
            tableData: [],
            currentPage: 1,
            PageSize: 10,
            fileList:[],
            pageSizes: [5, 10],
            typeStatus:'',
            vipLx:'',
            totalCount: 1,
            vipCardId:''
        }
    },
    created() {
        this.getVipCardList()
    },
    methods: {
        giftsVip(e){
            console.log(e)
            this.$prompt('请输入手机号', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
        //   this.$message({
        //     type: 'success',
        //     message: '赠送的手机号是: ' + value
        //   });
          sendVipUserList({
            vip_lx: e.lx_day,
            mobile: value,
            vip_config_id:e.id
            }).then(res => {
                console.log(res)
                if(res.code==0){
                    this.$message({
                        type: 'info',
                        message: res.msg
                    });
                }
            })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
        },
        // 显示第几页
    handleCurrentChange(val) {
        console.log(this.vipCardId)
      // 改变默认的页数
      this.currentPage = val
      this.getVipUserList()
    },
     // 分页
    // 每页显示的条数
    handleSizeChange(val) {

      // 改变每页显示的条数
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      console.log(val)
      this.PageSize = val
      // 改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1

      this.getVipUserList()
    },
    getVipUserList(){
        vipUserList({
                page: this.currentPage,
                limit: this.PageSize,
                vip_lx:this.vipLx,
                is_dq:this.typeStatus,
                id:this.vipCardId
            }).then(res => {
                console.log(res)
                this.managementData = res.data.list
                this.alltabData = res.data.list
                this.totalCount = res.data.total
            })
    },
        // 获取会员卡列表
        getVipCardList() {
            vipCardList({
                page: this.currentPage,
                limit: this.PageSize
            }).then(res => {
                this.tableData = res.data
            })
        },
        // 删除会员卡
        deleteVip(row) {
            this.$confirm('此操作将永久删除该会员卡, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            vipCardDelete({
                id: row.id
            }).then(res => {
                console.log(res)
                this.getVipCardList()
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        },
        modifyVip(row) {
            this.ruleForm = row
            this.dialogTableVisible = true
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleRemove(file, fileList) {
            console.log(fileList);
            console.log(file);
        },
        handleButtonAdd() {
            this.dialogTableVisible = true
        },
        clickDelete() {
            this.dialogTableVisible = false
        },
        clickConfirm() {
            if(this.ruleForm==''){
                vipCardModify({
                title: this.ruleForm.title,
                img_url: this.ruleForm.img_url,
                content: this.ruleForm.content,
                coin: this.ruleForm.coin,
                origin_coin: this.ruleForm.origin_coin,
                desc: this.ruleForm.desc,
                lx_day: this.ruleForm.lx_day,
            }).then(res => {
                this.ruleForm.title = ''
                this.ruleForm.img_url=''
                this.ruleForm.content = ''
                this.ruleForm.coin = ''
                this.ruleForm.origin_coin = ''
                this.ruleForm.desc = ''
                this.ruleForm.lx_day = ''
                this.fileList = []
                this.$refs.uploadImg.clearFiles()
                this.getVipCardList()
            })
            }else{
                vipCardModify({
                title: this.ruleForm.title,
                img_url: this.ruleForm.img_url,
                content: this.ruleForm.content,
                coin: this.ruleForm.coin,
                origin_coin: this.ruleForm.origin_coin,
                desc: this.ruleForm.desc,
                lx_day: this.ruleForm.lx_day,
                id: this.ruleForm.id
            }).then(res => {
                this.ruleForm.title = ''
                this.ruleForm.img_url=''
                this.ruleForm.content = ''
                this.ruleForm.coin = ''
                this.ruleForm.origin_coin = ''
                this.ruleForm.desc = ''
                this.ruleForm.lx_day = ''
                this.fileList = []
                this.$refs.uploadImg.clearFiles()
                this.getVipCardList()
            })
            }
            this.dialogTableVisible = false
        },
        handleButton1Click(id,e) {
            console.log(id)
            this.typeStatus = e
            this.vipLx=id.lx_day
            this.vipCardId = id.id
            vipUserList({
                page: this.currentPage,
                limit: this.PageSize,
                vip_lx:id.lx_day,
                is_dq:e,
                id:id.id
            }).then(res => {
                console.log(res)
                this.managementData = res.data.list
                this.alltabData = res.data.list
                this.totalCount = res.data.total
            })
            this.dialogManagementVisible = true
        },
        handleButtonDelete(e){

        },
        handleAvatarSuccess(res, file,fileList) {
        // this.imageUrl = URL.createObjectURL(file.raw);
        console.log(res)
        console.log(URL.createObjectURL(file.raw))
        this.fileList = fileList
        this.ruleForm.img_url = res.data.url
        // this.ruleForm.img_url = URL.createObjectURL(file.raw)
      },
    }
}
</script>

<style>
.tab {
    display: flex;
    align-items: center;
    margin: 30px 30px;
}

.tabSearch {
    display: flex;
}

.addBtn {
    margin-left: 30px;
    margin-bottom: 30px;
}
.ql-editor {

height: 300px;

}
</style>
